<template>
  <view :class="['my-nav', className]" :style="customStyle">
    <view class="my-nav-top" :style="{ height: `${menuButtonInfo.top}px` }">
      <slot></slot>
    </view>
    <view
      class="my-nav-content"
      :style="{ height: `${menuButtonInfo.height}px` }"
    >
      <template v-if="title">
        <up-icon name="arrow-left" :bold="true" @click="navigateBack"></up-icon>
        <text>{{ title }}</text>
      </template>
      <image v-else class="img" src="/static/logo.png" alt="" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { type CSSProperties } from "vue";

const { navigateBack } = uni;
const menuButtonInfo = uni.getMenuButtonBoundingClientRect?.() || {
  top: 0,
  height: 32,
};

defineProps<{
  className?: string;
  customStyle?: CSSProperties;
  title?: string;
}>();
defineExpose({
  height: menuButtonInfo.top + menuButtonInfo.height,
});
</script>

<style scoped lang="scss">
.my-nav {
  position: sticky;
  top: 0px;
  z-index: 999;

  .my-nav-content {
    display: flex;
    align-items: center;
    padding: 0 15px;
    image {
      width: 160px;
      height: 24px;
    }
    text {
      margin: auto;
    }
    &::after {
      content: "";
      width: 16px;
      height: 16px;
    }
  }
}
</style>
